<template>
  <el-dialog class="developer-add-page" v-model="visible" :title="titleMap[mode]" width="550" draggable align-center :close-on-click-modal="false" destroy-on-close @closed="$emit('closed')">
    <div class="input-tip">请输入需要绑定用户的手机号</div>
    <el-input class="input" v-model="params.phone" placeholder="请输入手机号">
      <template #suffix>
        <el-icon-search style="width: 20px; height: 20px; cursor: pointer" @click="foo"></el-icon-search>
      </template>
    </el-input>
    <div v-if="errTip" class="err-tip">{{ errTip }}</div>
    <el-row style="height: 100px; padding-top: 10px" :gutter="15">
      <el-col :span="12" v-for="developer in developerList" :key="developer.memberId">
        <el-card shadow="never" class="role-card">
          <el-row type="flex" align="middle" class="developer-card">
            <el-col :span="24" class="body__wrap">
              <div>
                <el-avatar @error="() => true" class="avatar__wrap" :src="developer.avatar">
                  <div class="defalut-img">
                    {{ developer.nickName.slice(0, 1) }}
                  </div>
                </el-avatar>
              </div>
              <div>
                <div class="name">{{ developer.nickName }}</div>
                <div class="phone">{{ developer.phone }}</div>
              </div>
            </el-col>
            <el-popconfirm title="确定要移除吗？" @confirm="removeDev(developer)">
              <template #reference>
                <el-icon class="close-icon" style="font-size: 20px"><el-icon-close /></el-icon>
              </template>
            </el-popconfirm>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button @click="addDev" type="primary" :loading="addLoading">添加</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      params: {
		  appId:null,
	  },
	  mode: "dev",
	  titleMap: {
	  	dev: '添加开发者',
	  	auth: '添加人员',
	  },
      errTip: "",
	  addLoading:false,
      developerList: [

      ],
	  form:{

	  }
    }
  },
  watch: {
    visible() {
      if (!this.visible) {
        this.clearData()
      }
    }
  },
  created() {
	  this.params.appId = this.$route.query.appId;
	  this.form.appId =  this.params.appId
  },
  methods: {
    open(mode) {
	  this.mode = mode;
      this.visible = true
    },
    async foo() {
      let res = await this.$API.system.member.searchDev.get(this.params);
      if (res.code == 200){
        this.developerList = res.data;
        if (res.data.length == 0){
          this.errTip = "暂无记录";
        }
      } else {
        this.errTip = "该用户已绑定成开发者，无需重复操作";
      }
    },
    clearData() {
      this.phoneNumber = ""
      this.errTip = ""
    },
    // 添加开发者
    async addDev() {
      if (this.developerList.length == 0) {
        this.$message.error("请选择要添加的开发者");
        return
      }
      this.addLoading = true;
      this.form.members = this.developerList;
      let res = await this.$API.system.member.addDev.post(this.form);
      if (res.code == 200){
        this.$message.success("添加成功")
        this.$parent.refreshDevloper()
      }else {
        this.$message.error("添加失败")
      }
      this.visible =false;
      this.addLoading = false;

    },
    // 移除
    removeDev(data){
      let index =	this.developerList.findIndex((item)=>{
        return item.memberId == data.memberId;
      })
      this.developerList.splice(index,1)
    }
  },
}
</script>

<style lang="scss" scoped>
.developer-add-page {
  .input-tip {
    padding-bottom: 20px;
    text-align: center;
    font-size: 14px;
    color: #000;
  }
  .input {
    padding-bottom: 10px;
  }
  .err-tip {
    color: #e47275;
  }
  .role-card {
    .developer-card {
      justify-content: space-between;
      align-items: center;
      position: relative;
      box-sizing: border-box;
      cursor: pointer;
      height: 60px;
      .avatar__wrap {
        margin-right: 10px;
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        .defalut-img {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #409eff;
          font-size: 28px;
          font-weight: bold;
          font-family: Verdana, Geneva, Tahoma, sans-serif;
        }
      }
      .body__wrap {
        display: flex;
        align-items: center;
        color: var(--el-text-color-regular);
        .name {
          font-size: 16px;
          font-weight: bolder;
          margin-bottom: 5px;
        }
        .phone {
          width: 100%;
          font-size: 14px;
        }
      }
      .close-icon {
        position: absolute;
        top: -5px;
        right: -5px;
        color: #7e7b7b;
        visibility: hidden;
      }
    }
    &:hover {
      .close-icon {
        visibility: visible;
      }
    }
  }
}
</style>
